{extend name="index/head" /}

{block name="link"}
<link rel="stylesheet" href="__STATIC__/index/css/huzixun.css">
<link rel="stylesheet" href="__STATIC__/index/css/head.css">
<link rel="stylesheet" href="__STATIC__/index/css/hudengji.css">
{/block}
{block name="main"}

<div id="contentsd" v-cloak>
    <div class="zxbanner">
        <img src="__STATIC__/index/img/xqbanner.jpg"   />
    </div>


    <div  class="mianind">

        <div class="biaoddd">
            <img  v-if="state==0"  :src="liuchengy" />
            <img v-else-if="state==1" :src="liuchenge" />
            <img v-else  :src="liuchengs" />
            <div class="biaofu">
                <div  :class="state>=0?'white':''"  >1.提交订单</div>
                <div  :class="state>=1?'white':''" >2.确认订单</div>
                <div  :class="state>=2?'white':''" >3.完成订单</div>
            </div>
        </div>


        <div class="neis"  v-if="state==0">
            <div>
             <form>

                 <div class="lijirightd">
                     <div>房间类型</div>
                     <select>
                         <option>总统套房</option>
                         <option>海景套房</option>
                         <option>贵族套房</option>
                         <option>单人套房</option>
                     </select>
                 </div>

                 <div  class="lijirightd">
                     <div>住店日期</div>
                     <div class="lijitopz">
                         <div><img :src="rilis">  <input type="date"   id="test1"/></div>
                         <div class="daozhi">到</div>
                         <div><img :src="rilis">  <input type="date"  id="test2"/></div>
                     </div>
                 </div>

                 <div class="lijiright">
                     <div>
                         <div>成人</div>
                         <div>
                             <div>-</div>
                             <div>0</div>
                             <div>+</div>
                         </div>
                     </div>
                     <div>
                         <div>儿童</div>
                         <div>
                             <div>-</div>
                             <div>0</div>
                             <div>+</div>
                         </div>
                     </div>
                 </div>


                 <div class="lijirightd">
                     <div>剩余客房量</div>
                     <div>10</div>
                 </div>

                <div class="tijiao">
                     <div>请填写入住人资料</div>
                </div>

                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">房间数量</div>
                     <input  type="text" placeholder=""  />
                 </div>

                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">姓名</div>
                     <input  type="text"  placeholder=""  />
                 </div>
                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">到店时间</div>
                  <select>
                      <option> 13:00</option>
                      <option> 14:00</option>
                      <option> 15:00</option>
                      <option> 16:00</option>
                      <option> 17:00</option>
                      <option> 18:00</option>
                  </select>
                 </div>
                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">联系人</div>
                     <input  type="text"  />
                 </div>

                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">性别</div>
                     <div class="checks">
                         <div>
                             <input id="item1" type="radio" name="item" value="男" checked>
                             <label for="item1"></label>
                             <span>男</span>
                         </div>
                         <div>
                             <input id="item2" type="radio" name="item" value="女">
                             <label for="item2"></label>
                             <span>女</span>
                         </div>
                     </div>

                 </div>
                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">联系电话</div>
                     <input  type="text" placeholder=""  />
                 </div>
                 <div class="yi">
                     <div class="yiyi" style="visibility: hidden">*</div><div class="yier">邮箱</div>
                     <input  type="text"  placeholder=""  />
                 </div>

                 <div class="yi">
                     <div class="yiyi">*</div><div class="yier">特殊要求</div>
                     <textarea  type="text"  placeholder="现酒店可提供服务范围内..."  ></textarea>
                 </div>


                 <div  class="moneytijiao">
                     <div>
                         <div><div>你的订单总金额为</div> <div>$1000.00</div> </div>
                         <div> <input  type="checkbox" />  <div>可以抵扣积分1000</div> </div>
                     </div>
                     <div>
                         <input @click="nextf"   type="submit" class="dnext" value="下一步"/>
                     </div>
                 </div>
             </form>
            </div>
        </div>


        <div class="neis"  v-if="state==1">
            <div class="neistop">
             <div>
                 <div class="danhang">
                     <div>总统套房</div>
                     <div>x 1 间</div>
                 </div>
                 <div class="tneidan">
                 <div class="neidan">
                      <div>房型:</div>
                      <div>总统套房</div>
                 </div>

                 <div class="neidan">
                     <div>成人:</div>
                     <div>1位</div>
                 </div>

                 <div class="neidan">
                     <div>儿童:</div>
                     <div>1位</div>
                 </div>

                 <div class="neidan">
                     <div>入驻日期:</div>
                     <div>2019-09-17</div>
                 </div>

                 <div class="neidan">
                     <div>离店日期:</div>
                     <div>2019-09-18</div>
                 </div>



                 </div>


                <div class="tneidans">
                    <div class="neidans">
                        <div>房价费用:</div>
                        <div>$1000</div>
                    </div>
                    <div class="neidans">
                        <div>服务费用:</div>
                        <div>$1000</div>
                    </div>
                    <div class="neidans">
                        <div>税务费用:</div>
                        <div>$1000</div>
                    </div>
                </div>

                 <div class="neidanshang">
                    <div><div>总价:</div><div>$1000.00</div></div>
                    <div><div>可获得积分:</div><div>100积分</div></div>
                 </div>

             </div>

            <div><img :src="fangxing"></div>
            </div>

            <div class="nersbottom">
                 <div>选择付款方式</div>
                 <div>
                    <div :class="zhifu==0?'zhifuac':''" @click="zhifud(0)">
                        <img  :src="weixinimg" >
                        <div>微信支付</div>
                    </div>
                     <div  :class="zhifu==1?'zhifuac':''" @click="zhifud(1)">
                         <img  :src="zhifubaoimg" >
                         <div>支付宝支付</div>
                     </div>
                 </div>

                <div  @click="nextff()">立即支付</div>

            </div>


        </div>


        <div class="neid"  v-if="state==2">
            <img :src="wanchengd" />
            <div>订单已经支付完成,<a  href="index.html">返回首页</a></div>
        </div>


    </div>




</div>


{/block}


{block name="js"}
<script src="__STATIC__/index/js/jquery.3.3.1.min.js"></script>
<script src="__STATIC__/index/js/vue.js"></script>
<script src="__STATIC__/index/js/Page.js"></script>
{/block}

{block name="xia"}
<script>

    new Vue({
        el: "#contentsd",
        data: {
            state:0, // 步骤状态
            zhifu:0,//支付选中状态
            liuchengs:"__STATIC__/index/img/liucheng1.png",   // 第三部验证 2
            liuchenge:"__STATIC__/index/img/liucheng2.png",  //第二步验证  1
            liuchengy:"__STATIC__/index/img/liucheng3.png", // 第一步验证 0
            rilis:"__STATIC__/index/img/rilis.png",  //日历图
            fangxing:"__STATIC__/index/img/fangxing2.jpg",  //房型图
            weixinimg:"__STATIC__/index/img/weixinimg.png",// 微信支付
            zhifubaoimg:"__STATIC__/index/img/zhifubaoimg.png",// 支付宝支付图片
            wanchengd:"__STATIC__/index/img/wanchengd.png", // 已经
        },
        methods: {
            // 下一步
            nextf:function () {
                this.state=1
            },
            // 再下一步
            nextff:function () {
                this.state=2
            },
            //点击支付方式
            zhifud:function(index){
                this.zhifu=index
            },


        },
        created() {
        },
        mounted() {

        }
    })



</script>
{/block}

